<template>
  <div class="cangku">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">仓库管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')">新增仓库</el-button>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template scope="s">
            <el-button type="success" icon="edit" size="mini" @click="tableEdit(s.row)"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="仓库类型" prop="lx">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_lx"
                    placeholder="仓库类型" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="mc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_mc"
                    placeholder="仓库名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>

    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}仓库</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="mc" label="仓库名称">
              <el-input
                type="text"
                v-model="formDialog.mc"
                placeholder="仓库名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="lx" label="仓库类型">
              <el-input
                type="text"
                v-model="formDialog.lx"
                placeholder="仓库类型"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="lxr" label="联系人">
              <el-input
                type="text"
                v-model="formDialog.lxr"
                placeholder="联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="lxdh" label="联系电话">
              <el-input
                type="text"
                v-model="formDialog.lxdh"
                placeholder="联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="mj" label="仓库面积">
              <el-input
                type="text"
                v-model="formDialog.mj"
                placeholder="仓库面积"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="dz" label="仓库地址">
              <el-input
                type="text"
                v-model="formDialog.dz"
                placeholder="仓库地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="user_lx" label="用户类型">
              <el-select v-model="formDialog.role_id" placeholder="请选择">
                <el-option
                  v-for="item in dialog.user_lx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="user_sm" label="用户实名">
              <el-input
                type="text"
                v-model="formDialog.user_sm"
                placeholder="用户实名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="user_xb" label="用户性别">
              <el-select v-model="formDialog.user_xb" placeholder="请选择">
                <el-option
                  v-for="item in CANGKU.user_xb"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="user_dlm" label="用户登录名">
              <el-input
                type="text"
                v-model="formDialog.user_dlm"
                placeholder="用户登录名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="user_dh" label="用户电话">
              <el-input
                type="text"
                v-model="formDialog.user_dh"
                placeholder="用户电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="user_yx" label="用户邮箱">
              <el-input
                type="text"
                v-model="formDialog.user_yx"
                placeholder="用户邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="user_zz" label="用户住址">
              <el-input
                type="text"
                v-model="formDialog.user_zz"
                placeholder="用户住址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="user_bz" label="备注">
              <el-input
                type="text"
                v-model="formDialog.user_bz"
                placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-tree
        :data="dialog.tree"
        ref="tree"
        node-key="id"
        show-checkbox
        :default-checked-keys="dialog.row.ids"
        accordion>
      </el-tree>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __form () {
    return { mc: { value: '', rule: [ 'vNull', 'vNTS' ], cRemarks: '' },
      lx: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      lxr: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      lxdh: { value: '', rule: [ 'vNull', 'vNHZ' ], cRemarks: '' },
      mj: { value: '', rule: [ 'vNull', 'vNumber' ], cRemarks: '' },
      dz: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      user_sjk: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bz: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ids: { value: '', rule: [], cRemarks: '' },
      role_id:
        { value: '11',
          rule: [ 'vNull' ],
          cRemarks: '0系统管理员 1仓库管理员 2仓库操作员 3供应商' },
      user_sm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      user_xb: { value: '0', rule: [ 'vNull' ], cRemarks: '0男 1女' },
      user_dlm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      user_dh: { value: '', rule: [ 'vNull', 'vNHZ' ], cRemarks: '' },
      user_yx: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      user_zz: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      user_bz: { value: '', rule: [ 'vNull' ], cRemarks: '' } };
  }
  export default AutoVue({
    name: 'system_cangku-FEcarWms',
    data: {
      table: {
        column: [ { label: '仓库名称',
          prop: 'mc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '仓库类型',
          prop: 'lx',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '联系人',
          prop: 'lxr',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '联系电话',
          prop: 'lxdh',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '仓库面积',
          prop: 'mj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '仓库地址',
          prop: 'dz',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '对应数据库名称',
          prop: 'user_sjk',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '备注',
          prop: 'bz',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '用户类型',
          prop: 'show_user_lx',
          minWidth: '0px',
          cRemarks: '0系统管理员 1仓库管理员 2仓库操作员 3供应商',
          search: false },
        { label: '用户实名',
          prop: 'user_sm',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '用户性别',
          prop: 'show_user_xb',
          minWidth: '0px',
          cRemarks: '0男 1女',
          search: false },
        { label: '用户登录名',
          prop: 'user_dlm',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '用户电话',
          prop: 'user_dh',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '用户邮箱',
          prop: 'user_yx',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '用户住址',
          prop: 'user_zz',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '备注',
          prop: 'user_bz',
          minWidth: '0px',
          cRemarks: '',
          search: false } ],
        key: 'id',
        url: '/wmswarehouse/list',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        user_lx: [],
        row: {},
        tree: [],
      },
    },
    transition: 'slide-fade',
    store: ['MENU', 'CANGKU', 'DICTIONARY_cangku'],
    methods: {
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;

        await AutoPromise([
          async () => {
            if (this.MENU.menu.length === 0) {
              this.SET('MENU', await this.post('/sysMenu/getMenus'));
            }
          },
          async () => {
            if (!this.DICTIONARY_cangku) {
              await this.USE('DICTIONARY_cangku');
            }
          },
          async () => {
            this.dialog.user_lx = [await this.post('/wmswarehouse/addSearchJs')];
          },
        ]);
        if (this.dialog.tree.length === 0) this.dialog.tree = this.MENU.menu;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          this.dialog.row = more;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              let tree = this.$refs.tree;
              let ids = tree.getCheckedKeys(true);
              let idsParent = [];
              let addIdsParent = key => {
                let parent = tree.store.nodesMap[key].parent;
                if (typeof parent.key === 'undefined' || idsParent.indexOf(parent.key) !== -1) return;
                idsParent.push(parent.key);
                addIdsParent(parent.key);
              };
              for (let item of ids) {
                addIdsParent(item);
              }
              ids = [...ids, ...idsParent];
              option.ids = ids;
              let {data} = await this.post('/wmswarehouse/add', option);
              option.id = data.id;
              this.table.data = [option, ...this.table.data];
              this.table.total++;
              this.resetFields('formDialog');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              let tree = this.$refs.tree;
              let ids = tree.getCheckedKeys(true);
              let idsParent = [];
              let addIdsParent = key => {
                let parent = tree.store.nodesMap[key].parent;
                if (typeof parent.key === 'undefined' || idsParent.indexOf(parent.key) !== -1) return;
                idsParent.push(parent.key);
                addIdsParent(parent.key);
              };
              for (let item of ids) {
                addIdsParent(item);
              }
              ids = [...ids, ...idsParent];
              option.ids = ids;
              option.id = this.dialog.row.id;
              await this.post('/wmswarehouse/edit', option);
              for (let index in this.dialog.row) {
                if (this.dialog.row.hasOwnProperty(index)) {
                  this.dialog.row[index] = option[index];
                }
              }
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .form_item_user{
    margin-bottom: 0;
  }

  .cangku .el-switch__label {
    span {
      font-size: 12px;
    }
  }

  .cangku .portrait .cell{
    padding: 0 10px;
  }

  .cangku .__transfer .el-checkbox__label{
    .label{
      padding-right: 5px;
    }
    .name{

    }
    .show_appId{
      color: #0affce;
    }
    .show_rentId{
      color: #d35e56;
    }
  }

</style>
